import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import ContentBox from 'components/contentBox'
import CustomTable from 'components/common/table'
import { Form, message, Switch, Modal, Input, Radio } from 'antd'
import PropTypes from 'prop-types'
import Style from './index.css'

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
}
class RecycleForm extends Component {
  static propTypes = {
    getRulesList: PropTypes.func,
    ruleData: PropTypes.object,
    setRules: PropTypes.func,
    editRules: PropTypes.func,
    editRequest: PropTypes.any
  }
  constructor (props) {
    super(props)
    this.state = {
      editData: {}
    }
    this.showEdit = this.showEdit.bind(this)
    this.hideEdit = this.hideEdit.bind(this)
    this.auditSubmit = this.auditSubmit.bind(this)
  }

  getTableCols () {
    return [
      {
        title: '用户等级名称',
        dataIndex: 'typeName',
        key: 'typeName',
        width: 100
      },
      {
        title: '默认用户类型',
        dataIndex: 'defaultFlag',
        key: 'defaultFlag',
        width: 100,
        render: (text, record) => <Switch defaultChecked={text === 1} size='small' onChange={(value) => this.setDefault(value, record.id)} />
      },
      {
        title: '免运费特权',
        dataIndex: 'freeLogistics',
        key: 'freeLogistics',
        width: 100
      },
      {
        title: '专享活动特权',
        dataIndex: 'exclusiveActivities',
        key: 'exclusiveActivities',
        width: 100
      },
      {
        title: '备注',
        dataIndex: 'price',
        key: 'price',
        width: 100,
        sorter: (a, b) => a.price - b.price
      },
      {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        render: (text, record) => {
          return <>
            <a className={Style['a-btn']} onClick={() => this.showEdit(record)}>编辑</a>
            {/* <Popconfirm placement='top' title='确认是否删除' onConfirm={() => this.handleRestore(record.commodityId)}>
              <a className={Style['a-btn']}>删除</a>
            </Popconfirm> */}
          </>
        },
        width: 100
      }
    ]
  }

  // 还原
  handleRestore (id) {

  }

  setDefault (value, id) {
    this.props.setRules({
      id,
      defaultFlag: value ? 1 : 0
    })
  }

  showEdit (record) {
    console.log(444)
    this.setState({
      showEdit: true,
      editData: record
    })
  }

  hideEdit () {
    this.setState({
      showEdit: false
    })
  }

  auditSubmit () {
    const { editData } = this.state
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.id = editData.id
        values.exclusiveActivities = values.exclusiveActivities ? 1 : 0
        this.props.editRules(values)
      }
    })
  }

  componentDidMount () {
    this.props.getRulesList()
  }

  componentWillReceiveProps (nextProps) {
    if (!this.props.editRequest && nextProps.editRequest) {
      message.success('编辑成功')
      this.setState({
        showEdit: false
      })
      this.props.getRulesList()
    }
  }

  render () {
    const { ruleData } = this.props
    const { showEdit, editData } = this.state
    const { getFieldDecorator } = this.props.form

    return (
      <>
        <ContentBox>
          <div className={Style['scenes-RecycleForm']}>
            <CustomTable
              loading={!ruleData} columns={this.getTableCols()}
              dataSource={(ruleData && ruleData.list) || []}
              pagination={false} />
            <Modal
              title='编辑用户类型'
              destroyOnClose
              visible={showEdit}
              width={600}
              onOk={this.auditSubmit}
              onCancel={this.hideEdit}>
              <Form {...layout} >
                <Form.Item label='用户类型名称'>
                  {
                    getFieldDecorator('typeName', {
                      initialValue: editData.typeName,
                      rules: [{ required: true, message: '输入' }]
                    })(
                      <Input disabled />
                    )
                  }

                </Form.Item>
                <Form.Item label='设置为默认用户类型'>
                  {
                    getFieldDecorator('defaultFlag', {
                      initialValue: editData.defaultFlag,
                      rules: [{ required: true, message: '输入' }]
                    })(
                      <Radio.Group>
                        <Radio value={1}>是</Radio>
                        <Radio value={0}>否</Radio>
                      </Radio.Group>
                    )
                  }

                </Form.Item>
                <Form.Item label='满免运费特权'>
                  {
                    getFieldDecorator('freeLogistics', {
                      initialValue: editData.freeLogistics
                    })(
                      <Input placeholder='请输入' />
                    )
                  }

                </Form.Item>
                <Form.Item label='专享活动特权'>
                  {
                    getFieldDecorator('exclusiveActivities', {
                      initialValue: editData.exclusiveActivities === 1,
                      valuePropName: 'checked'
                    })(
                      <Switch size='small' />
                    )
                  }
                </Form.Item>
              </Form>
            </Modal>
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  ruleData: state.users.ruleData,
  editRequest: state.users.editRequest
})
const mapDispatch = dispatch => ({
  getRulesList: dispatch.users.getRulesList,
  setRules: dispatch.users.setRules,
  editRules: dispatch.users.editRules
})

const Recycle = Form.create()(RecycleForm)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(Recycle)
)
